<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>购物车</title>
  </head>
  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="https://darktchr.github.io/api/images/fruit/水果.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>购物车</span>
      </div>
      <!-- 购物车主体 -->
      <div class="main" v-if="fruitList.length > 0">
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">选中</div>
              <div class="th th-pic">图片</div>
              <div class="th">单价</div>
              <div class="th num-th">个数</div>
              <div class="th">小计</div>
              <div class="th">操作</div>
            </div>
          </div>
          <!-- 身体 -->
          <div class="tbody">

            <div class="tr" :class="{active:item.isChecked}" v-for=" (item , index) in fruitList" :key="item.id">
              <div class="td"><input type="checkbox" v-model="item.isChecked"/></div>
              <div class="td"><img :src="item.icon" alt="" /></div>
              <div class="td">{{item.price}}</div>
              <div class="td">
                <div class="my-input-number">
                  <button :disabled="item.num <= 1" class="decrease" @click="sub(item.id)"> - </button>
                  <span class="my-input__inner">{{item.num}}</span>
                  <button class="increase" @click="add(item.id)"> + </button>
                </div>
              </div>
              <div class="td">{{item.num * item.price}}</div>
              <div class="td"><button @click="del(item.id)">删除</button></div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <!-- 全选 -->
          <label class="check-all">
            <input type="checkbox" v-model="isAll" />
            全选
          </label>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span>
            <!-- 结算按钮 -->
            <button class="pay">结算( {{totalCount}} )</button>
          </div>
        </div>
      </div>
      <!-- 空车 -->
      <div class="empty" v-else>🛒空空如也</div>
    </div>
    <script src="./js/vue2.6.12.js"></script>
    <script>
      // localStorage   .setItem("名字","值")存 .getItem("名字") 取
      // window 对象 自带   window.localStorage  /  localStorage
      // 渲染页面时,有缓存就加载缓存, 否则渲染初始数据

      var defaultArr = [
            {
              id: 1,
              icon: 'https://darktchr.github.io/api/images/fruit/火龙果.jpg',
              isChecked: true,
              num: 2,
              price: 6,
            },
            {
              id: 2,
              icon: 'https://darktchr.github.io/api/images/fruit/荔枝.jpg',
              isChecked: false,
              num: 7,
              price: 20,
            },
            {
              id: 3,
              icon: 'https://darktchr.github.io/api/images/fruit/火龙果.jpg',
              isChecked: false,
              num: 3,
              price: 40,
            },
            {
              id: 4,
              icon: 'https://darktchr.github.io/api/images/fruit/芭乐.jpg',
              isChecked: true,
              num: 10,
              price: 3,
            },
            {
              id: 5,
              icon: 'https://darktchr.github.io/api/images/fruit/樱桃.jpeg',
              isChecked: false,
              num: 20,
              price: 34,
            },
          ]

      const app = new Vue({
        el: '#app',
        data: {
          // 水果列表  []
          //                                f     ||     t
          // 需要补充
          fruitList: JSON.parse(localStorage.getItem("cart")) || defaultArr,
        },
        methods:{
          del(id){
            this.fruitList = this.fruitList.filter( item => item.id !== id)
          },
          add(id){
            // forEach
            // find()
            var fruit = this.fruitList.find( item => item.id === id)
            fruit.num++
          },
          sub(id){
            var fruit = this.fruitList.find( item => item.id === id)
            fruit.num--
          }
        },
        computed:{
          isAll:{
            // input:checkbox  = true
            set(val){
              console.log('set');
              // 手动一个一个选中,最终 全选也被选中
              this.fruitList.forEach(item => item.isChecked = val)
            },
            get(){
              console.log('get');
              // 取值
              // every 返回的是 执行遍历后  最终的 bool状态
              // 5个 item.isChecked  都是true 最终才能返回True  否则 返回false
              // return true
              return this.fruitList.every(item => item.isChecked)
            }
          },
          totalCount(){
            // 计算的是 被选中的  √
            // 1 2 3 4
            return this.fruitList.reduce((sum , item)=>{
              if(item.isChecked){
                // 选中
                return sum + item.num
              }else{
                // 没选中
                return sum
              }
            } , 0)
          },
          totalPrice(){
            return this.fruitList.reduce((sum , item)=>{
              if(item.isChecked){
                // 选中
                return sum + item.num * item.price
              }else{
                // 没选中
                return sum
              }
            } , 0)
          }
        },
        watch:{
          fruitList:{
            deep:true,
            // fruitList   []
            handler(newValue){
              console.log(123456);
              // 保存数据到localStorage
              // 补充: 数据在js环境下 有数据类型 这一说法
              // 但是被存起来之后(数据库/localStorage)没有数据类型
              // 要手动处理:
              // 存之前 :  将数据类型 转换为没有意义的 字符串  JSON.stringify()
              // 取之后 :  将字符串 转换为 数组 JSON.parse()
              localStorage.setItem("cart",JSON.stringify(newValue))
            }
          }
        }
      })
    </script>
  </body>
</html>
